<script setup lang="ts">
import ModelAreaBox from "./model-area-box.vue";
import { ref, defineEmits } from 'vue'
let actionTab  = ref<number>(1)
const emit = defineEmits(['changeTab'])
const changeTabIndex = (i:number) => {
  actionTab.value = i
  emit("changeTab",actionTab.value)
}
const TabContent = [
  {
    label: '上传训练集',
    key:'up-train-file'
  },
  {
    label: '模型训练',
    key: 'model-set'
  },
  {
    label: '上传测试集',
    key: 'up-test-file'
  },
  {
    label: '模型调整',
    key: 'model-adjust'
  }
]


</script>

<template>
  <a-row :gutter="24" style="height: auto;margin-bottom: 1.2rem">
    <a-col :span="6"
           v-for="(item, index) in TabContent"
           :key="item.key"
           class="btn-box-model"
           @click="changeTabIndex(index+1)">
      <a-card class="btn-box-card" :class="{action:actionTab===index+1}">
        {{item.label}}
      </a-card>
    </a-col>
  </a-row>
</template>

<style scoped lang="scss">
.btn-box-model{
  width: 100%;
  height: 5rem;
  .btn-box-card{
    width: 100%;
    font-size: 1rem;
    color: #9a9da3;
    text-align: center;
    &:hover{
      transition: all 100ms 0s ease;
      background: #fcfcfc;
    }
    &:active{
      box-shadow: 0 1px 1px 0 #1f436c;
    }
  }
  .action{
    border-bottom: 3px solid #7BC0FC;
    font-weight: bold;
    color: #21252b;
  }
}
</style>